<template>
  <div>
      <!-- 分组 -->
    <ul v-for="group in tops" :key="group.groupId" class="rank_list">
      
      <li
        v-for="item in group.toplist"
        :key="item.topId"
        class="rank_list__item c_bg2" @click="toDetail(item.topId)"
      >
        <div class="rank_list__bd">
          <h2 class="rank_list__tit">{{ item.musichallTitle }}</h2>
          <!-- 每个榜 -->
          <ol class="rakn_song_list">
            <li
              class="rakn_song_list__item"
              v-for="(song, index) in item.song"
              :key="index"
            >
              <strong class="rakn_song_list__no c_txt1">{{
                index + 1 + "."
              }}</strong>
              <span class="rakn_song_list__name c_txt1">{{
                song.title + "-"
              }}</span>
              <span class="rakn_song_list__singer c_txt2">{{
                song.singerName
              }}</span>
            </li>
          </ol>

          <!-- 右侧图片 -->
        </div>
        <div class="rank_list__media">
          <img class="rank_list__img" :src="item.frontPicUrl" />
          <span class="rank_list__update">{{ item.updateTips }}</span>
          <div class="mui_cover_count">
            <i class="mui_cover_count__icon"></i>
            <span class="mui_cover_count__num">{{
              (item.listenNum / 10000).toFixed(1) + "万"
            }}</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import { getTops } from "@/api/tops";
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      tops: [],
    };
  },
  methods: {
     ...mapMutations([
      "changeShowPlayer",
      "changePlayerState",
      "changeMusicUrl",
      "changeHeaderShow",
      "changeMusicUrls"
    ]),
    toDetail(topID){
      this.$router.push({path:'/TopDetail?id='+topID})
    }

  },
  created() {
     this.changeHeaderShow({showTabs:true});
    getTops().then((res) => {
      const { topListData } = res.data;
      this.tops = topListData.list;
      //console.log(topListData);
    });
  },
};
</script>

<style >
@import "https://y.qq.com/mediastyle/mobile/yqq_v9/index.css?max_age=2592000"; 
</style>